<template>
  <div class="tag-history-item">
    <tag-content-header search refresh @toolFun="toolFun" :settingData="columns">
      <template #title>
        <span class="title-text">浏览历史</span>
      </template>
    </tag-content-header>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #assetType="{ scope }">
        <el-tooltip
          effect="dark"
          :content="$dict('asset_type')[scope.row.assetType]"
          placement="top"
          :enterable="false"
        >
          <icon-svg :name="scope.row.assetType | iconNameFormatter" class="typeIcon"></icon-svg>
        </el-tooltip>
      </template>
      <template #assetNm="{scope}">
        <span class="click-item" @click="gotoDetail(scope.row)">
          {{ scope.row.assetNm }}
        </span>
      </template>
    </tag-table>
  </div>
</template>

<script>
import '../utils/marketFormatter'
import market from '../utils/market.js'
export default {
  data() {
    return {
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '类型',
          prop: 'assetType',
          search: true,
          dict: 'asset_type',
          searchKey: '',
          align: 'center',
          width: 150
        },
        {
          show: true,
          label: '名称',
          prop: 'assetNm',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '时间',
          prop: 'exploreTm',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: ['exploreTm'],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.params.queryParams.userId = this.$store.state.user.id
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/exploreLogList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation, type = '') {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
        case 'filter':
          // 列表过滤
          this.params.queryParams.assetType = type
          this.getList()
          break
      }
    },
    gotoDetail(item) {
      market.gotoDetail(item)
    }
  }
}
</script>

<style lang="scss">
.tag-history-item {
  padding: 0 20px;
  .no-records {
    margin: 100px auto;
    text-align: center;
    p {
      margin: 30px;
      color: #a7a6a6;
    }
  }
}
</style>
